import '../App.css'
import { TabBar } from 'antd-mobile'
import shopping from '../assets/shopping.png'
import { useNavigate, useLocation } from 'react-router-dom'
import {
    AppOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'
export default function Category() {
    const navigate = useNavigate();
    const location = useLocation(); // 获取当前路由位置
    const tabs = [
        {
            key: '/',
            title: '首页',
            icon: <AppOutline />,
            onClick: () => navigate('/')
        },
        {
            key: '/category',
            title: '分类',
            icon: <UnorderedListOutline />,
            onClick: () => navigate('/category')
        },
        {
            key: '/cart',
            title: '购物车',
            icon: (active: boolean) => <img src={active ? shopping : shopping} alt="" style={{ width: '24px', height: '24px' }} />,
            onClick: () => navigate('/cart')
        },
        {
            key: '/mine',
            title: '我的',
            icon: <UserOutline />,
            onClick: () => navigate('/mine')
        },
    ]
    // 根据当前路径确定activeKey
    const activeKey = tabs.find(tab => location.pathname === tab.key)?.key || '/';
    return (
        <div>分类


            {/* 底部导航栏 */}
            <TabBar activeKey={activeKey} onChange={(key) => {
                const tab = tabs.find(tab => tab.key === key);
                if (tab) {
                    tab.onClick();
                }
            }}>
                {tabs.map(item => (
                    <TabBar.Item
                        key={item.key}
                        icon={item.icon}
                        title={item.title}
                        onClick={item.onClick}
                    />
                ))}
            </TabBar>
        </div>
    )
}